<html>
<head>
    <title>Angular JS Table</title>
    <style>
        table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
        table tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
        table tr:nth-child(even) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="app" ng-controller="studentController">
    <table border="0">
        <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
        <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
        <tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
        <tr><td>Subject:</td><td>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Marks</th>
                </tr>
                <tr ng-repeat="subject in student.subjects">
                    <td>{{ subject.name }}</td>
                    <td>{{ subject.marks }}</td>
                </tr>
            </table>
        </td></tr>
    </table>
</div>
<script>
    function studentController($scope) {
        $scope.student = {
            firstName: "Mahesh",
            lastName: "Parashar",
            fees:500,
            subjects:[
                {name:'Physics',marks:70},
                {name:'Chemistry',marks:80},
                {name:'Math',marks:65},
                {name:'English',marks:75},
                {name:'Hindi',marks:67}
            ],
            fullName: function() {
                var studentObject;
                studentObject = $scope.student;
                return studentObject.firstName + " " + studentObject.lastName;
            }
        };
    }
</script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>-->
<script src="http://cdn.bootcss.com/angular.js/1.4.0/angular.min.js"></script>
</body>
</html>